﻿<!DOCTYPE html>
<!--<html manifest="test.manifest">-->
<html>
	<head>
	 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
	</head>
	<style type="text/css">
		#process {
			border:1px solid gray;
			width: 320px;
			height: 7px;
			cursor: hand;
			cursor: pointer;
		}
		#process_current {
			height: 7px;
			background-color: #000;
			width:0px;
		}

	</style>
	<body>
	
<!--		<video id="test1" width="320" height="240" controls preload="metadata">
		  <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
		Your browser does not support the video tag.
		</video>-->
		
		<video id="test2" width="320" height="240" controls>
		  <source src="http://localhost:3001/aa" type="video/mp4" preload="none" onabort="videoError()">
		Your browser does not support the video tag.
		</video>
		
		<div id="process">
			<div id="process_current"></div>
		</div>
	</body>
</html>
<script src="common.js" type="text/javascript"></script>

<script type="text/javascript">
//    var videoDom = document.getElementById("test2");
//    var ok = true;
//    videoDom.addEventListener("seeking",function(e){
////        console.log(e.target.buffered.end(0));
////        e.target.currentTime = e.target.buffered.end(0);
//    });
//    videoDom.addEventListener("loadedmetadata",function(){
//        ok = false;
//    });
	
//    videoDom.addEventListener("abort",function () {  
//    console.log("3333333333333333333");
//        var currentTime = this.video.currentTime;  
//        this.video.load();  
//        this.controls.seekTo(currentTime)  
//    });

//    videoDom.addEventListener("error",function () {  
//    console.log("4444444444444444");
//        var currentTime = this.video.currentTime;  
//        this.video.load();  
//        this.controls.seekTo(currentTime)  
//    });

//下面的代码目前不起作用,直接无视

	(function(){
		window.VideoPlayer = function(){
			var self = this;
			self = {
				videoBlock : 2,
				videoItems : ["test1","test2"],
				videoDefault : "test1",
				_totalDuration : 0,
				_videoInfos : [],
				_currentVideo: "",
				init : function(){
					var defaultV = self.videoDefault || "";
					if(defaultV){
						var defaultVideoObj = document.getElementById(defaultV);
						defaultVideoObj.play();
						self._switchVideo(defaultV);
						self._bindEvents();
					}
				},
				_bindEvents : function(){
					for(var i = 0; i < self.videoItems.length; i++){
						var videoDom = document.getElementById(self.videoItems[i]);
						videoDom.removeEventListener("timeupdate",self.timeupdate);
						videoDom.addEventListener("timeupdate",self.timeupdate);
						videoDom.removeEventListener("loadedmetadata",self.loadedmetadata);
						videoDom.addEventListener("loadedmetadata",self.loadedmetadata);
						videoDom.removeEventListener("ended",self._videoplayended);
						videoDom.addEventListener("ended",self._videoplayended);
                        videoDom.addEventListener("loadstart",function(){
                            alert("aaa");
                        });
					}
					//这里应该移除去
					var process = document.getElementById("process");
	
					process.removeEventListener("click",self._onprocesschange);
					process.addEventListener("click",self._onprocesschange);
					process.removeEventListener("mousemove",self._slideProcessBar);
					process.addEventListener("mousemove",self._slideProcessBar);
					
				},
				_getRangeVideo : function (currentTime){
					var timeSpan = 0;
					var excludeTime = 0;
					for(var i = 0; i < self.videoItems.length; i++){
						var videoTarget = self._videoInfos[self.videoItems[i]];
						timeSpan += videoTarget.duration;
						
						if(timeSpan >= currentTime){
							return {video:self.videoItems[i], timeline: (currentTime - excludeTime)};
						}
						excludeTime += videoTarget.duration;
					}
					return 0;
				},
				_setVideoTime : function (currentTime){
					document.getElementById(self._currentVideo).currentTime = currentTime;
				},
				_videoplayended : function(e){
					self._playNextVideo();
				},
				_switchVideo : function(playVideo){
					for(var i = 0; i < self.videoItems.length; i++){
						document.getElementById(self.videoItems[i]).style.display = 
							(self.videoItems[i] == playVideo) ? "block" : "none";
						if(self.videoItems[i] == playVideo){
							document.getElementById(self.videoItems[i]).play();
						}else{
							document.getElementById(self.videoItems[i]).pause();
						}
					}
					self._currentVideo = playVideo;
				},
				_playNextVideo : function(){
					var nextVideo = "";
					for(var i = 0; i < self.videoItems.length; i++){
						if(self.videoItems[i] == self._currentVideo){
							nextVideo = self.videoItems[i+1] || self.videoItems[0];
							break;
						}
					}
					self._switchVideo(nextVideo);
				},
				_calcCurrentTime : function(currentTime){
					var timeSpan = 0;
					for(var i = 0; i < self.videoItems.length; i++){
						var videoTarget = self._videoInfos[self.videoItems[i]];
						if(self.videoItems[i] == self._currentVideo){
							break;
						}
						timeSpan += videoTarget.duration;
					}
					return timeSpan + currentTime;
				},
				timeupdate : function(e){
					var currentTime = e.target.currentTime;
					self._changeProcess(self._calcCurrentTime(currentTime));
				},
				loadedmetadata : function(e){
					var key = e.srcElement.id;
					var time = e.target.duration;
					self._totalDuration += time;
					var info = {
						url : e.target.currentSrc,
						duration : e.target.duration,
					};
					self._videoInfos[key] = info;
				},
				_changeProcess : function(currentTime){
					var processWidth = document.getElementById("process").offsetWidth;
					var currentWidth = document.getElementById("process_current").offsetWidth;

					var setWidth = currentWidth = (currentTime / self._totalDuration) * processWidth;
					document.getElementById("process_current").style.width = currentWidth + "px";
				},
				_onprocesschange : function(e){
					var curVideo = self._slideProcessBar(e);
					
					self._switchVideo(curVideo.video);
					self._setVideoTime(curVideo.timeline);
				},
				_slideProcessBar : function(e){
					var processDom = document.getElementById("process");
					var curProcessDom = document.getElementById("process_current");
		
					var setWidth = e.x - getX(processDom);
					var processWidth = processDom.offsetWidth - 1;//去除边框的1像素
					//currentTime / self._totalDuration = setWidth / processWidth
					//console.log(processWidth + "     "+setWidth + "     "+self._totalDuration);
					var currentTime = (setWidth / processWidth) * self._totalDuration;
					
					var curVideo = self._getRangeVideo(currentTime);
					
					document.getElementById("process").title = self._formatTime(currentTime);
					
					return curVideo;
				},
				_formatTime : function(second) {
					return [parseInt(second / 60 / 60), parseInt(second / 60 % 60), Math.round(second % 60)].join(":")
						.replace(/\b(\d)\b/g, "0$1");
				}
			};
			return self;
		};
	})();
	


	/*new VideoPlayer().init();*/
	

	function getX(obj){ 
		var parObj=obj; 
		var left=obj.offsetLeft; 
		while(parObj=parObj.offsetParent){ 
			left+=parObj.offsetLeft; 
		} 
		return left; 
	} 
	
</script>